<template lang="pug">
  .homepart
    div.mbx
      span.ml24 数据统计
      div(@click="$router.push('/operative/dashboard/largeScreen')")
        span 数据管理
        img(src="@/assets/right.png")
    el-row(:gutter="20")
      el-col(:span="7")
        .innelPanel2
          div.top
            img(src="@/assets/yuan.png")
            span 大屏显示数据统计
          div.boxx
            .personList2
              div.biaozhi
                div
                div 本月寿星
              el-row(:gutter="20" v-if="student.monthBirthdayList.length > 0")
                el-col(:span="8" v-for="(item, index) in student.monthBirthdayList.slice(0, 6)" :key="item.id")
                  .studentBox(:style="{marginTop: index > 2 ? '10px' : 0}")
                    a-image(:url="item.imgUrl" :defaultImage="item.gender === 0 ?'nv(1)':'nan(1)'" width="40px" height="40px" round )
                    div.h3 {{item.name}}
              empty(v-else)
            .personList2
              div.biaozhi
                div
                div 缺勤学生
              el-row(:gutter="20" v-if="student.absenceList.length > 0")
                el-col(:span="8" v-for="item in student.absenceList.slice(0, 3)" :key="item.id")
                  .studentBox
                    a-image(:url="item.imgUrl" :defaultImage="item.gender === 0 ?'nv(1)':'nan(1)'" width="40px" height="40px" round)
                    div.h3 {{item.name}}
      el-col(:span="17")
        .innelPanel2
          div.top
            img(src="@/assets/yuan.png")
            span 园所数据统计
          statics-echarts(show)
      <!--el-col(:span="7")-->
        <!--.innelPanel-->
          <!--h2 园所数据统计-->
          <!--.gardensStatics(v-for="(item, key) in gardensStatics" :key="key")-->
            <!--h3-->
              <!--span(v-if="item.amount") ￥{{item.amount}}-->
              <!--span(v-else) {{item.num}}-->
              <!--span.title {{item.title}}-->
            <!--el-progress(-->
              <!--:stroke-width="10"-->
              <!--:percentage="item.rate"-->
              <!--:color="item.color"-->
              <!--:format="val => `完成率 ${val}%`"-->
            <!--)-->
</template>
<script>
import Empty from '@/components/Basic/Empty'
import AImage from '@/components/Basic/Image'
import StaticsEcharts from '../dataStatics/group/components/staticsEcharts'
import { dashboard1 } from '@/api/dashboard.js'

export default {
  components: {
    AImage,
    Empty,
    StaticsEcharts
  },
  data () {
    return {
      student: {
        monthBirthdayList: [],
        absenceList: []
      },
      gardensStatics: {
        monthIncome: {
          title: '本月营收（元）',
          amount: 6888,
          rate: 30,
          color: '#B9DDFF'
        },
        inNursy: {
          title: '托班在园（个）',
          num: 38,
          rate: 30,
          color: '#FFC5D4'
        },
        price: {
          title: '客单价（元/合同）',
          amount: 288,
          rate: 30,
          color: '#FFC8C3'
        }
      }
    }
  },
  created () {
    this.dashboard1()
  },
  methods: {
    dashboard1 () {
      dashboard1().then(res => {
        console.log(res)
        this.student.monthBirthdayList = res.birthdays
        this.student.absenceList = res.absense
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.innelPanel2{
  ::v-deep{
    .box{
      padding:0 !important;
      padding-top: 16px;
      margin-bottom: 0 !important;
    }
    .mbx{
      display: none;
    }
    .box_title{
      display: none;
    }
    .box:nth-child(2){
      display: none;
    }
  }
  .top{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    img{
      margin-right: 12px;
    }
    span{
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bolder;
      font-size: 16px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
.homepart{
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  .mbx{
    padding: 0 !important;
  }
}
.personList2{
  .biaozhi{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    div:nth-child(1){
      width: 184px;
      height: 0px;
      border: 1px dotted #9EC1EA;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    div:nth-child(2){
      position: relative;
      z-index: 5;
      width: 72px;
      height: 24px;
      background: #FFFFFF;
      border-radius: 24px;
      border: 1px solid #9EC1EA;

      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      text-align: center;
      line-height: 24px;
    }
  }
}
.personList2:nth-child(2){
  margin-top: 16px;
}
.boxx{
  margin-top: 18px;
  background: linear-gradient( 360deg, #FCFBFE 0%, #F1F9FF 100%);
  border-radius: 8px;
  padding: 16px;
}
.h3{
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #77778C;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
